<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表展现案例</title>
	</head>
	<body>
		<div id="app">
			<h1 align="center">用户列表展现案例</h1>
			<table align="center" border="1px" width="800px">
				<tr align="center">
					<td>ID编号</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>性别</td>
					<td>操作</td>
				</tr>
				
				<!-- 
					v-for:表示
				 -->
				<tr align="center" v-for="user in userList">
					
					<!-- 
						客户不断刷新,会看到取值方式{{}}
						<td>{{user.id}}</td>
						<td>{{user.name}}</td>
						<td>{{user.age}}</td>
						<td>{{user.sex}}</td>
					 -->
					
					<td v-text="user.id"></td>
					<td v-text="user.name"></td>
					<td v-text="user.age"></td>
					<td v-text="user.sex"></td>
					<td><button @click="deleteUserById(user.id)">删除</button></td>
				</tr>
			</table>
		</div>


		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<script>
			/*
				案例1:
					1.url地址:http://localhost:8090/user/findAll
					2.获取数据之后  要求页面表格展现
					3.要求使用vue.js的循环遍历标签完成任务
			*/
		   axios.defaults.baseURL = "http://localhost:8090"
			const app = new Vue({
				el: "#app",
				data: {
					//1.定义属性,接收ajax返回的结果
					userList:[]
				},
				methods: {
					async findUser(){
						let {data:result} = await axios.get("/user/findAll")
						// console.log(result)
						//ajax返回的结果,需要赋值给vue.js的属性,之后利用属性在在页面中展现!!!
						this.userList = result
					},
					async deleteUserById(id){
						//let {data:result} = await axios.delete("/user/deleteUserById?id="+id)
						await axios.delete("/user/deleteUserById?id="+id)
							alert("删除成功!")
							this.findUser()
					},
					/*
					
					deleteUserById(id){ //url: user/deleteUserById
					
					get的方式
						alert("删除用户"+id+"成功")
						axios.get("/user/deleteUserById?id="+id)
								.then(promise=>{
									console.log(promise.data)
									location.reload()
								})
								*/
							   
							   /*delete的方式:
									delete和get的参数传递方式一样
					}
					
					*/
				},
				
				//生命周期函数,由系统自动调用
				mounted() { //vue对象初始化成功,可以被用户使用了
					this.findUser();
				}
			})
		</script>
	</body>
</html>
